<!--suppress ALL -->
<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane label="区域耗时" name="first">
      <app-area/>
    </el-tab-pane>
    <el-tab-pane label="耗时分布" name="second">
      <app-interval/>
    </el-tab-pane>
    <el-tab-pane label="接口排行" name="third">
      <app-url/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
var echarts = require('echarts');
import request from '@/utils/request';
import geojson from '@/assets/aa.json';
import AppArea from './component/appArea';
import AppUrl from './component/appUrl';
import AppInterval from './component/appInterval';

export default {
  name: 'User',
  components: { AppArea, AppUrl, AppInterval },
  data() {
    return {
      activeName: 'first',
      chart: null,
      // echarts数据
      echartsData: {
        time: [],
        webTime: []
      }
    };
  },
  mounted() {
  },

  methods: {
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'));
      echarts.registerMap('HK', geojson);
      this.setOptions();
    },
    setOptions() {
      const option = {
        title: {
          text: '柬埔寨访问接口耗时',
          subtext: ''
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (ms)'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        visualMap: {
          min: 100,
          max: 2000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '香港18区人口密度',
            type: 'map',
            mapType: 'HK', // 自定义扩展图表类型
            itemStyle: {
              normal: { label: { show: true }},
              emphasis: { label: { show: true }}
            },
            data: this.echartsData.time
          }
        ]
      };
      this.chart.setOption(option);
    },
    fectchData() {
      this.chart.showLoading();
      request({
        url: '/v1/statistics/web/app/area',
        method: 'get'
      }).then(response => {
        this.chart.hideLoading();
        this.parseSerierData(response.data);
        this.setOptions();
      });
    },
    parseSerierData(data) {
      var timeData = [];
      for (var row of data) {
        var userData = {};
        // 一个用户的所有来源
        userData.name = row.area;
        userData.value = row.time;
        timeData.push(userData);
      }
      this.echartsData.time = timeData;
    }
  }
};
</script>

<style scoped>
  .components-container {
    position: relative;
    height: 100vh;
    padding: 20px;
  }
</style>
